//小鸟类
//是循环渲染三只小鸟
//其实是循环渲染图片的三个部分

import Sprite from '../base/Sprite.js'
import DataStore from '../base/DataStore.js'

export default class extends Sprite {
  constructor() {
    const image = Sprite.getImage('birds')
    super(image,
      0, 0,
      image.width, image.height,
      0, 0,
      image.width, image.height,
    )
    //小鸟的三种状态需要一个数组去存储
    //小鸟的宽是34，小鸟的高度是24，上下边距是10，小鸟左右边距是9
    this.clippingX = [
      9,
      9+34+18,
      9+34+18+34+18
    ]
    this.clippingY = [10,10,10]
    // this.clippingWidth = [34,34,34]
    // this.clippingHeight = [24,24,24]
    const birdX = DataStore.getInstance().canvas.width/4
    const birdY = DataStore.getInstance().canvas.height/2
    const birdWidth = 34
    const birdHeight = 24
    this.clippingWidth = new Array(3).fill(birdWidth)
    this.clippingHeight = new Array(3).fill(birdHeight)
    this.birdsX = new Array(3).fill(birdX)
    this.birdsY = new Array(3).fill(birdY)
    this.birdsWidth = new Array(3).fill(birdWidth)
    this.birdsHeight = new Array(3).fill(birdHeight)
    this.y = new Array(3).fill(birdY)

    this.count = 0
    this.index = 0
    this.time = 0
    this.speed = 0.2
  }
  draw() {
    this.count += this.speed
    if (this.index >=2) {
      this.count = 0
    }
    this.index = Math.floor(this.count)
    // 重力加速度
    const g = 0.98 / 2.4
    const offsetUp = 30
    const offsetY = 0.5 * g * this.time * (this.time - offsetUp)
    this.birdsY = this.birdsY.map((item, index) => {
      return this.y[index] + offsetY
    })
    this.time++
    super.draw(this.img,
      this.clippingX[this.index], this.clippingY[this.index],
      this.clippingWidth[this.index], this.clippingHeight[this.index],
      this.birdsX[this.index], this.birdsY[this.index],
      this.birdsWidth[this.index], this.birdsWidth[this.index]
      )
  }
}
